<template>
  <el-dialog
    :visible.sync="isBet"
    width="1000px"
    :show-close="false"
    :before-close="handleClose"
  >
    <div class="out">
      <div class="closeW">
        <img
          src="@/assets/img/close.png"
          alt=""
          class="close"
          @click="handleClose"
        />
      </div>
      <div class="top">
        <h2 class="title">
          Betting {{ betName ? betName : '' }}
          {{ betId == 1 || betId == 2 ? 'Win' : 'Draw' }}
        </h2>
      </div>
      <div class="content">
        <el-slider
          v-model="value"
          class="slider"
          @change="outBlur"
          @input="
            isInput = true;
            inputCount = 0;
          "
        >
        </el-slider>
        <div class="count">
          <img src="@/assets/img/logo.png" alt="" />
          <!-- <input type="text" v-model="mount" @change='getSliderCount' /> -->
          <el-input
            v-if="!isInput"
            type="number"
            v-model="inputCount"
            @input="clearZero"
            @focus="getSliderCount()"
            @blur="outBlur"
            @keydown.native="channelInputLimit"
          >
          </el-input>
          <span class="inputC" v-else @click="getSliderCount">{{ mount }}</span>
        </div>
      </div>
      <span class="betContent"
        >You will bet {{ betName }}
        {{ isInput ? $formatNum(mount) : inputCount }} CHIPS。</span
      >
      <div class="buttons">
        <el-button class="virtoy" @click="betName == '' ? bet(3) : bet(betId)"
          >Confirm</el-button
        >
        <!-- <el-button class="equality" @click="bet(3)">Draw</el-button> -->
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { web3handle, adderss, poolBet, ApproveChipsToChipsBet } from "@/web3/index"
import { mapState, mapActions } from "vuex"
import BigNumber from 'bignumber.js'
import Web3 from 'web3'
import CryptoJS from 'crypto-js'
export default {
  props: ['isBet', 'gameId', 'game', 'betName', 'betId'],
  data () {
    return {
      value: 0,
      sign: '',
      inputCount: 0,
      isInput: true //显示允许输入的input
    };
  },
  async mounted () {
    var temp2 = window.location.href.split('?')[1];
    var pram2 = new URLSearchParams('?' + temp2);
    this.sign = pram2.get('sign')

  },
  computed: {
    ...mapState({
      currentAccount: state => state.account,
      blance: state => state.blance
    }),
    mount: function () {
      return new BigNumber(this.value).times(new BigNumber(this.blance)).div(100).toFixed(0).toString()
    }
  },
  watch: {

  },
  methods: {
    async bet (betPoolN) {
      console.log(typeof (this.inputCount))
      let num = this.isInput ? this.mount : this.inputCount
      console.log(num)
      if (Number(num) <= 0) {
        this.message('Insufficient balance!', 3)
        return false
      }
      this.message('Betting', 1)
      var that = this
      ApproveChipsToChipsBet(async () => {
        // console.log(this.mount)
        // console.log(typeof )
        console.log(Web3.utils.toWei(num))
        console.log(new BigNumber(Web3.utils.toWei(num)).toFixed(0).toString())
        let afNum = new BigNumber(Web3.utils.toWei(num)).toFixed(0).toString()
        console.log(afNum, this.gameId, betPoolN)
        that.loading("Please wait...");
        const handerPoolBet = await web3handle(poolBet)
        const result = handerPoolBet && await handerPoolBet(afNum, this.gameId, betPoolN)

        if (!result) {
          that.message('Betting Failed', 2)
          that.loadingOver()
          return false
        }
        that.loadingOver()
        that.handleClose()
        if (result) {
          let parmasAn = {
            address: this.$store.state.account,
            amount: parseInt(this.mount).toFixed(2),
            scheduleId: this.gameId,
            sign: this.sign,
            teamId: betPoolN
          }
          let parmas = {
            encrypt: CryptoJS.AES.encrypt(JSON.stringify(parmasAn), 'jkl;POIU1234++==').toString()
          }
          that.postHttp(that.api.createBet, parmas).then(res => {
            console.log(res)
          }).finally(() => {
            // setTimeout(()=>{
            //   location.reload()
            // },1000)
          })

        }
      }, () => {

      })

    },
    handleClose () {
      this.$emit("isBetData");
    },
    getSliderCount () {
      this.value = 0
      this.isInput = false
      // this.inputCount=0
    },
    outBlur () {
      // this.isInput=true
    },
    channelInputLimit (e) { // 不允许输入'e'和'.'
      console.log(e)
      let key = e.key
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    clearZero () {
      let num = this.inputCount.toString()
      if (num.substring(0, 1) == 0) {
        this.inputCount = num.substr(1)
      }
    }
  },
};
</script>
<style scoped lang='scss'>
.out {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  .closeW {
    text-align: right;
    width: 100%;
    .close {
      width: 26px;
      cursor: pointer;
    }
  }
  .top {
    .title {
      display: inline-block;
      color: #000;
      font-size: 36px;
      font-weight: 600;
    }
    .teamPic {
      width: 50px;
    }
  }
  .content {
    margin-top: 80px;
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // flex: 1;
    .slider {
      flex: 1;
    }
    .count {
      margin-left: 30px;
      width: 200px;
      display: flex;
      align-items: center;
      border: 8px solid #d7bbe4;
      height: 50px;
      border-radius: 12px;
      background-color: #4f335c;
      img {
        width: 30px;
        margin: 0 10px;
      }
      input {
        height: 50px;
        width: 140px;
        background-color: #4f335c;
        border: none;
        color: #fff;
        font-size: 30px;
        outline: none;
      }
      .inputC {
        color: #fff;
        flex: 1;
        text-align: left;
      }
    }
  }
  .betContent {
    margin: 20px 0 25px 0;
    color: #363636;
    font-size: 16px;
    width: 800px;
    text-align: left;
    font-weight: 500;
  }
  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 800px;
    .virtoy,
    .equality {
      width: 100%;
      height: 100px;
      background: #ffa31e;
      border-radius: 11px;
      border: 5px solid #c67d14;
      color: #a06f00;
      font-size: 33px;
    }
    .equality {
    }
  }
}
</style>
<style scoped lang="scss">
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}
/deep/.el-dialog__header {
  padding: 0 !important;
}
/deep/ .el-dialog {
  border-radius: 30px !important;
  background-color: #f9f4f4 !important;
}
/deep/ .el-slider__runway {
  border: 8px solid #d7bbe4 !important;
  height: 50px !important;
  border-radius: 12px !important;
  background-color: #4f335c !important;
}
/deep/ .el-slider__bar {
  height: 50px !important;
  background-color: #43807f !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  z-index: 100 !important;
}
/deep/ .el-slider__button {
  width: 36px !important;
  height: 77px !important;
  background: #affffe;
  border-radius: 13px;
  border: 4px solid #43807f;
  box-sizing: border-box !important;
}
/deep/ .el-input__inner {
  background: #4f335c !important;
  color: #fff !important;
  border: none !important;
  padding: 0 !important;
  -webkit-appearance: none !important ;
}
</style>